﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Shared/MasterPageFrameset.master" ValidateRequest="false" %>
<%@ Register Assembly="Typps" Namespace="Typps" TagPrefix="cc1" %>
<script runat="server">
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <title>Typps HTML Editor has a built-in ms-word cleanup utility. Enjoy clean markup always!</title>
    <style type="text/css">
        #mswordinput
        {
            margin:10px 0 10px 5px;
            height:180px;
            width:580px;
        }
        #mswordoutput
        {
            margin:10px 0 10px 5px;
            background:#a1caed;
        }
        button{margin: 5px;}
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <h1>Ms word clean up</h1>
    <p>
        By default, ms-word markup pasted into the editor will be parsed and cleaned up.
        Feel free to copy/paste from msword and then switch to HtmlView (using the Html
        tab in the editor)</p>
        <cc1:Editor ID="Editor1" Skin="BlueSteel" IconsMode="ImageSprites" runat="server" EnableViewState="false">
        </cc1:Editor>
    <br style="clear:both" />
    <p>
        But what exactly did ms-word paste and what really got cleaned up? Simply paste
        the same content (copy from ms-word and paste directly in the editable region below?)</p>
    <div>
        <iframe id="mswordinput"></iframe>
    </div>
    <div><input type="button" value="Collect raw output" id="buttonrender" /><input type="button" value="Clear" id="buttonclear" /></div>
    <p>
        The raw markup output of whatever you entered in the editable region above will
        display in the textarea below.</p>
    <div>
        <textarea rows="10" cols="70" id="mswordoutput"></textarea></div>
    <p>
        What you will eventually see in the textarea above is raw output. Comparing this
        output with that of the HTML Editor will show you the amount of tidying done by the HTML Editor to
        conform to w3c standards and recommendations by cleaning up not only msword ouput but by maintaining minimum formatting and also
        by following XHTML Transitional/Frameset or Strict doctype schema as specified by the developer during development</p>
    <script type="text/javascript">
        /*This code that follows has nothing to do with the editor ofcourse. 
        It's just minimum plumbing code needed to create this sample of special circumstance :)*/
        var input = $get('mswordinput');
        var output=$get('mswordoutput');
        var buttonRender=$get('buttonrender');
        var buttonClear=$get('buttonclear');
        function pageLoad(sender,args)
        {
            if(input!=null){
                input.contentWindow.document.designMode = "on";
                Sys.UI.DomEvent.addHandler(input.contentWindow.document,'keyup',renderOutput);
                if(buttonRender!=null)
                    Sys.UI.DomEvent.addHandler(buttonRender,'click',renderOutput);
                if(buttonClear!=null)
                    Sys.UI.DomEvent.addHandler(buttonClear,'click',function(args){
                        input.contentWindow.document.body.innerHTML='';
                        output.value='';
                    });
            }
        }
        function renderOutput()
        {
            if(output!=null)
                output.value=input.contentWindow.document.body.innerHTML;
        }
    </script>
</asp:Content>

